<template>
	<view v-if="scrollTop>1000" class="backTop display-flex display-flex-column display-flex-align-center display-flex-justify-center" :class="{'mescroll-fade-in':isShowToTop}" @click="toTopClick">
		<image src="/static/images/backtop.png" mode="widthFix" />
		<view class="" style="color: #666;font-size: 10px;">
			回顶部
		</view>
	</view>
</template>

<script>
	export default {
		name: "backTop",
		props: {
			src: {
				type: String,
				default: ''
			},
			id: {
				type: String,
				default: ''
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			tab: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isShowToTop: true
			}
		},
		methods: {
			toTopClick() {
				this.isShowToTop = false; // 回到顶部按钮需要先隐藏,再执行回到顶部,避免闪动
				if (this.tab) {
					this.$emit('setScrollTop');
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}


			}
		},

	}
</script>

<style>
	.mescroll-lazy-in,
	.mescroll-fade-in {
		-webkit-animation: mescrollFadeIn .3s linear forwards;
		animation: mescrollFadeIn .3s linear forwards;
	}

	.backTop {
		z-index: 999;
		position: fixed;
		right: 20upx;
		bottom: 300upx;
		/* #ifdef H5 */
		bottom: 300upx;
		/* #endif */
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		text-align: center;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 8px;
		box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 10px 0px;
	}

	.backTop image {
		height: 20px;
		width: 20px;
	}
</style>
